<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>权限管理</title>
</head>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<link rel="stylesheet" href="resources/css/sweetalert2.css">
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="./resources/js/jquery.min.js"></script>
<script src="resources/js/sweetalert2.min.js"></script>
<body>
<div id="mainApp">
 	<el-container>
 		<el-header style="heighe:10px;">
	  		<el-row :gutter="24">
				<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
					<el-breadcrumb class="breadcrumb-inner">
						<el-breadcrumb-item><h2>权限管理</h2></el-breadcrumb-item>
					</el-breadcrumb>
				</el-col>
	  		</el-row>
 		</el-header>
 		<el-main>
	  	    <el-card calss="box-card">
		  	  	<el-row :gutter="24">
			  		<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
			  			<span><h4>权限Tree</h4></span>
			  		</el-col>
			  	</el-row>
		   	</el-card>
		   	<el-card calss="box-card" style="margin-top:20px;">
  			<el-aside width="200px"> 
		  		<el-tree
				  :data="menuTreeData"
				  node-key="id"
				  :props="defaultProps"
				  @node-click="clickNode">
				</el-tree>
			</el-aside>
			</el-card>
			<el-card style="margin-top:20px;">
 				<el-button @click="showAdd" type="primary">新增</el-button>
 				<el-button @click="showModify" type="primary">修改</el-button>
 			</el-card>
 			<el-dialog title="新增菜单" :visible.sync="dialogAddForm">
				<el-form ref="form" v-model="addMenuData" label-width="100px">
					<el-form-item label="上级菜单">
							<el-input v-model="addMenuData.parentsId" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="菜单编号">
						<el-input v-model="addMenuData.menuCode"></el-input>
					</el-form-item>
					<el-form-item label="菜单名称">
						<el-input v-model="addMenuData.menuName"></el-input>
					</el-form-item>
					<el-form-item label="菜单地址">
						<el-input v-model="addMenuData.menuUrl"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
				    <el-button @click="dialogAddForm = false">取 消</el-button>
				    <el-button type="primary" @click="addNode">新增</el-button>
				</div>
			</el-dialog>
			
			<el-dialog title="修改菜单" :visible.sync="dialogModifyForm">
				<el-form ref="form" v-model="menuData" label-width="100px">
					<el-form-item label="菜单id" v-show="false">
						<el-input v-model="menuData.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="菜单编号">
						<el-input v-model="menuData.menuCode" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="菜单名称">
						<el-input v-model="menuData.menuName"></el-input>
					</el-form-item>
					<el-form-item label="菜单地址">
						<el-input v-model="menuData.menuUrl"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
				    <el-button @click="dialogModifyForm = false">取 消</el-button>
				    <el-button type="primary" @click="modifyNode">修改</el-button>
				</div>
			</el-dialog>
		</el-main>
	</el-container>
</div>
</body>
<script>
var app = new Vue({
		el:"#mainApp",
	    data:{
	    	menuTreeData:[],
          	defaultProps: {
          		children: 'childList',
          		label: 'menuName'
          	},
          	id:'',
          	menuData:'',
          	dialogAddForm:false,
          	dialogModifyForm:false,
          	addMenuData:''
	    },
	    mounted: function (){
	    	//页面加载初始化
	    	this.allTreeMenu();
	    },
	    methods: {
	      //获取用户列表
	      allTreeMenu(){
	    	  var _this = this;
	    	  $.post("./menu/allTreeMenu", function(data) {
	    		  _this.menuTreeData = data;
	    	  });
		  },
		  clickNode(val){
	    	  //防止修改的部门信息时候tree跟着修改
	    	  if(val!=null && val!=''){
	    		  var data = {};
				  data['id']=val.id;
				  data['menuCode']=val.menuCode;
				  data['menuName']=val.menuName;
				  data['menuUrl']=val.menuUrl;
				  data['menuImage']=val.menuImage;
				  data['menuType']=val.menuType;
				  data['parentsId']=val.parentsId;
				  this.menuData = data; 
	    	  }
		  },
		  showAdd(){
			  var parentsId = this.menuData.id;
			  if(this.menuData==null || this.menuData==''){
				 swal({ 
					  title: "确定新增？", 
					  text: "你即将新增一级菜单！", 
					  type: "warning",
					  showCancelButton: true, 
					  confirmButtonColor: "#DD6B55",
					  confirmButtonText: "确定", 
					  cancelButtonText: "取消", 
					  closeOnConfirm: false
				}).then((result)=>{
					if(result){
						parentsId = "";
						this.dialogAddForm = true;
						this.dialogModifyForm = false;
					}
				});
			  }else{
				  this.dialogAddForm = true;
				  this.dialogModifyForm = false; 
			  }
			  
			  var data = {};
			  data['parentsId']=parentsId;
			  data['menuCode']="";
			  data['menuName']="";
			  data['menuUrl']="";
			  this.addMenuData=data;
		  },
		  showModify(){
			  if(this.menuData==null || this.menuData==''){
				  this.$alert('<strong>请选择菜单,然后修改</strong>', '提示', {
			          dangerouslyUseHTMLString: true
			      });
				  return;
			  }
			  this.dialogAddForm = false;
			  this.dialogModifyForm = true;
		  },
		  addNode(){
			  var data = this.addMenuData;
			  if(data.menuCode==null || data.menuCode=='' || data.menuName==null || data.menuName=='' ||
				  data.menuUrl==null || data.menuUrl==''){
				  this.$alert('<strong>必填项不能为空!</strong>', '提示', {
			          dangerouslyUseHTMLString: true
			      });
				  return;
			  }
			  this.updateMenu(data);
		  },
		  modifyNode(){
			  var data = this.menuData;
			  if(data.menuCode==null || data.menuCode=='' || data.menuName==null || data.menuName=='' ||
				  data.menuUrl==null || data.menuUrl==''){
				  this.$alert('<strong>必填项不能为空!</strong>', '提示', {
			          dangerouslyUseHTMLString: true
			      });
				  return;
			  }
			  this.updateMenu(data);
		  },
		  updateMenu(data){
			  data = JSON.stringify(data);
			  var _this = this;
			  $.ajax({
			　　　　　　　　url:"./menu/saveMenu",
			　　　　　　　　type:"POST",
			　　　　　　　　data:data,
						dataType: "json",
			　　　　　　　　contentType:"application/json;charset=utf-8",
			　　　　　　　　success:function(data){
			　　　　　　　　　　if("1"==data.code){
								_this.$alert('<strong>操作成功!</strong>', '提示', {
							          dangerouslyUseHTMLString: true
							    });
								_this.dialogAddForm = false;
								_this.dialogModifyForm = false;
								//操作完成重新初始化tree
								_this.allTreeMenu();
			　　　　　　　　　　}else{
								_this.$alert('<strong>操作失败!</strong>', '提示', {
							          dangerouslyUseHTMLString: true
							    });
			　　　　　　　　　　}
			　　　　		}
			　});
			  
		  }
	    }
	  });
</script>
</html>